<template>
  <div>
    <span>{{text}}</span>
    <!--  v-for="(v,i) in arr" :key="i"-->
    <div class="box" v-for="(v,i) in arr" :key="i">
      <img :src="v.img">
      <p>{{v.pp}}</p>
    </div>
  </div>
</template>

<script>
export default {
  //     props:["arr"]
  //
  data() {
    return {
      text:"推荐活动",
      arr: [
        { img: "/bb/b1.png", pp: "邀请好友的充电宝/耳机" },
        { img: "/bb/b1.png", pp: "邀请好友的充电宝/耳机" },
        { img: "/bb/b1.png", pp: "邀请好友的充电宝/耳机" },
        { img: "/bb/b1.png", pp: "邀请好友的充电宝/耳机" }
      ]
    };
  }
};
</script>

<style scoped>
.box {
  display: flex;
  margin-left: 0.3rem;
  margin-right: 0.3rem;
  line-height: 1.17rem;
  font-size: 0.3rem;
  margin-bottom: 0.3rem;
}
img {
  width: 1.17rem;
  height: 1.17rem;
  margin-right: 0.4rem;
}
span {
  margin-left: 0.3rem;
  margin-top: 0.3rem;
  margin-bottom: 0.3rem;
  display: block;
   font-size: 0.3rem;
   font-weight: 600;
}
</style>
